<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="has('create')" @click="editRef.open()" />
          <btn-tool-remove v-if="has('remove')" @click="remove()" />
          <btn-tool-export v-if="has('export')" @click="exports" />
          <btn-tool-import v-if="has('import')" @click="imports" />
          <t-button theme="default" title="清空数据缓存" @click="clearCache">清空缓存</t-button>
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-view @click="detailRef.open(row)" />
          <btn-row-update v-if="has('update')" @click="editRef.open({ id: row.id })" />
          <btn-row-add v-if="row.type !== 0 && has('create')" @click="addChildren(row)">添加下级</btn-row-add>
          <btn-row-remove v-if="has('remove')" @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
      <template #keepalive="{ row }">
        <t-switch v-if="row.type === 1" :value="row.keepalive" @change="() => changeKeepalive(row)" />
      </template>
      <template #sort="{ row }">
        <t-input-number :value="row.sort" theme="normal" style="width: 90px" @blur="updateSort($event, row)" />
      </template>
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { useAuth, LgButtonList, LgTable, useTreeTable } from '@/soar';
import schema from './schema';
import api from './api';
import Edit from './Edit.vue';
import Detail from './Detail.vue';

const { has } = useAuth();
const editRef = ref();
const detailRef = ref();

const { exports, imports, remove, reload, tableProps } = useTreeTable({
  api,
  loadChildren({ row }) {
    return api.query({ queryType: 'list', pageSize: 999999, $soarQuery: { 'parentId-eq': row.id } });
  },
  props: {
    fields: ['leftNo', 'rightNo', 'id'],
    orderBys: ['sort'],
    actionbar: {
      width: 100,
    },
    paramsHandle(params) {
      params.$soarQuery['parentId-eq'] = 0;
    },
  },
});

function clearCache() {
  api.clearCache();
}

const typeMap = [2, 0, 1, 2];
function addChildren(row) {
  editRef.value.open({
    parentId: row.id,
    type: typeMap[row.type],
    status: 0,
    path: row.path,
    component: typeMap[row.type] === 2 ? 'layouts/index.vue' : null,
  });
}

function changeKeepalive(row: any) {
  api.update({ id: row.id, keepalive: !row.keepalive }).then(() => {
    row.keepalive = !row.keepalive;
  });
}

function updateSort(e: any, row: any) {
  if (e !== row.sort) {
    api.update({ id: row.id, sort: e }).then(() => {
      row.sort = e;
    });
  }
}
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
